<!-- HTML5文档头 -->
<!DOCTYPE html>
<!-- lang="zh-cn"，此网页基本是中文内容 -->
<html lang="zh-cn">

	<head>
		<meta charset="utf-8" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<!-- 使用最新的IE兼容模式渲染此网页 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<!-- 在双核浏览器下，默认使用webkit内核，由360浏览器提出 -->
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>Deliver</title>
		<!--<link rel="shortcut icon" href=""/>-->
		<!-- 强大的CSS Reset库 -->
		<link rel="shortcut icon" href="img/Logo-i.png" />
		<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
		<script src="vendor/fakeLoader.min.js"></script>
		<link href="http://cdn.bootcss.com/normalize/5.0.0/normalize.css" rel="stylesheet">
		<link href="vendor/bootstrap-3.3.0/css/bootstrap.css" rel="stylesheet" />
		<link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<link rel="stylesheet" href="vendor/animate.css" />
		<link rel="stylesheet" href="vendor/fakeLoader.css" />
		<link rel="stylesheet" href="vendor/animsition.min.css" />
		<link href="css/core.css" rel="stylesheet" />
		<!-- 让IE9以下的浏览器支持HTML5标签 -->
		<!--[if lt IE 9]>
        	<script src="http://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
        	<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
	</head>

	<body class="animsition">
		<!--IE9一下浏览器提示-->
		<!--[if lt IE 9]>
			<div class="Del-warning" id="DelWarning">
				<div class="warning-center">
					<span class="tips">为了您更好的体验，请使用IE 9及以上的浏览器！</span>
					<span class="close" id="close"><i class="fa fa-times"></i></span>
				</div>
			</div>
		<![endif]-->
		<!--加载蒙层-->
		<div class="fakeloader"></div>
		<script>
			$(".fakeloader").fakeLoader({
				timeToHide: 500, //Time in milliseconds for fakeLoader disappear
				zIndex: 99999, // Default zIndex
				spinner: "spinner1", //Options: 'spinner1', 'spinner2', 'spinner3', 'spinner4', 'spinner5', 'spinner6', 'spinner7' 
				bgColor: "#c19c83", //Hex, RGB or RGBA colors
				//				imagePath: "yourPath/customizedImage.gif" //If you want can you insert your custom image
			});
		</script>

		<!--公共header-->
		<header class="Del-common-header" id="commonHeader">
			<div class="img-rund" id="imgRund">
				<div class="img-boxs">
					<img src="img/home-bg01.jpg">
					<img src="img/home-bg02.jpg">
					<img src="img/home-bg03.jpg">
					<img src="img/home-bg04.jpg">
				</div>
				<div class="content">
					<div class="common-header-top">
						<div class="top-logo-img">
							<img src="img/logo2.png">
						</div>
						<ul class="top-list clearfix">
							<li class="list-item list-rss">
								<a href=""><i class="fa fa-rss"></i></a>
							</li>
							<li class="list-item list-f">
								<a href=""><i class="fa fa-facebook-f"></i></a>
							</li>
							<li class="list-item list-twitter">
								<a href=""><i class="fa fa-twitter"></i></a>
							</li>
						</ul>
					</div>
					<div class="common-header-nav wow fadeInUp animated" data-wow-duration="1s" data-wow-delay="0.5s">
						<ul id="nav-menu" class="nav-menu clearfix">
							<li class="nav-toggle">
								<div id="toggle-icon" class="toggle-icon">
									<i class="fa fa-bars"></i>
									<i class="fa fa-times" style="display: none;"></i>
								</div>
							</li>
							<li class="signin-toggle">
								<a data-sign="0" id="signin-icon" class="user-signin"><i class="fa fa-user"></i></a>
							</li>
							<li class="home-logo">
								<a href="index-Home.html"><span class="text-replace">DELIVER</span></a>
							</li>
						</ul>
						<ul class="nav-list clearfix">
							<li class="list-item">
								<a href="" class="nav-active">HOME</a>
							</li>
							<li class="list-item">
								<a href="portfolio.html" class="animsition-link" data-animsition-out="fade-out-left" data-animsition-out-duration="500">PORTFOLIO</a>
							</li>
							<li class="list-item">
								<a href="about.html" class="animsition-link" data-animsition-out="fade-out-left" data-animsition-out-duration="500">ABOUT</a>
							</li>
							<li class="list-item">
								<a href="services.html" class="animsition-link" data-animsition-out="fade-out-left" data-animsition-out-duration="500">SERVICES</a>
							</li>
							<li class="list-item">
								<a href="about.html" class="animsition-link" data-animsition-out="fade-out-left" data-animsition-out-duration="500">ARCHIVE</a>
							</li>
							<li class="list-item">
								<a href="index-blog.html" class="animsition-link" data-animsition-out="fade-out-left" data-animsition-out-duration="500">BLOG</a>
							</li>
							<li class="list-item">
								<a href="other-pages.html" class="animsition-link" data-animsition-out="fade-out-left" data-animsition-out-duration="500">OTHER&nbsp;PAGES</a>
							</li>
							<li class="list-item">
								<a href="contact-us.html" class="animsition-link" data-animsition-out="fade-out-left" data-animsition-out-duration="500">CONTACT&nbsp;US</a>
							</li>
							<li class="list-item header-search">
								<form method="get" target="_blank" id="searchform" name="searchform" action="http://www.baidu.com/s">
									<div class="search-input-wrapper">
										<span class="search-icon"><i class="fa fa-search"></i></span>
										<input type="hidden" name="genre" value="">
										<input type="search" class="search-input" id="search-input" name="word" value="" placeholder="输入关键词搜索..." autocomplete="off">
										<button type="submit" class="search-submit" id="search-submit"></button>
									</div>
								</form>
							</li>
						</ul>
					</div>
					<div class="header-we wow fadeInUp animated" data-wow-duration="1s" data-wow-delay="0.5s">
						<h1>WE DELIVER <a href="#">NOTHING</a> SHORT OF AWESOME!</h1>
						<p>Check out our portfolio to see our great work.</p>
						<div class="we-a">
							<a href="portfolio.html" class="animsition-link" data-animsition-out="fade-out-down-sm" data-animsition-out-duration="800">PORTFOLIO</a>
						</div>
					</div>
					<a class="home-prev home-prev-left wow fadeInLeft animated" data-wow-duration="1s" data-wow-delay="0.8s" href="javascript:void(0)" id="prev"></a>
					<a class="home-prev home-prev-right wow fadeInRight animated" data-wow-duration="1s" data-wow-delay="0.8s" href="javascript:void(0)" id="next"></a>
					<ul class="prevous-list clearfix wow fadeInUp animated" data-wow-duration="1s" data-wow-delay="0.5s" id="points">
						<li class="prevous-item prevous-active"></li>
						<li class="prevous-item"></li>
						<li class="prevous-item"></li>
						<li class="prevous-item"></li>
					</ul>
				</div>
			</div>

		</header>

		<section class="Del-Home-container">
			<div class="content">
				<div class="Home-top-text wow fadeInUp animated" data-wow-duration="1s" data-wow-delay="0.5s">
					<h3>WE ARE A SMALL TEAM DOING BIG THINGS!</h3>
					<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent justo ligula, interdum ut lobortis quis, interdum vitae metus. Proin fringilla metus non nulla cursus, sit amet rutrum est pretium.</span>
				</div>
				<ul class="Home-services clearfix">
					<li class="services-item item-left wow fadeInLeft animated" data-wow-duration="1s" data-wow-delay="0.5s">
						<div class="item-head item-hl">
						</div>
						<div class="item-aside">
							<h4>SERVICES1</h4>
							<span>Lorem ipsum dolor sit amet, consectetur praseinti adipiscing elit. Praesent lato justo ligula, interdu ut lobortis quis dolor amet.</span>
							<div class="more">
								<a href="#">Find Out More</a>
							</div>
						</div>

					</li>
					<li class="services-item item-center-mg wow fadeInUp animated" data-wow-duration="1s" data-wow-delay="0.8s">
						<div class="item-head item-hc">

						</div>
						<div class="item-aside">
							<h4>SERVICES2</h4>
							<span>Lorem ipsum dolor sit amet, consectetur praseinti adipiscing elit. Praesent lato justo ligula, interdu ut lobortis quis dolor amet.</span>
							<div class="more">
								<a href="#">Find Out More</a>
							</div>
						</div>
					</li>
					<li class="services-item wow fadeInRight animated" data-wow-duration="1s" data-wow-delay="0.5s">
						<div class="item-head item-hr">

						</div>
						<div class="item-aside">
							<h4>SERVICES3</h4>
							<span>Lorem ipsum dolor sit amet, consectetur praseinti adipiscing elit. Praesent lato justo ligula, interdu ut lobortis quis dolor amet.</span>
							<div class="more">
								<a href="#">Find Out More</a>
							</div>
						</div>
					</li>
				</ul>

			</div>
			<div class="Home-someWork wow fadeInUp animated" data-wow-duration="1s" data-wow-delay="0.5s">
				<div class="someWork">
					<h3>SOME OF OUR LATEST WORK</h3>
					<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent justo ligula, interdum ut lobortis quis, interdum vitae metus. Proin fringilla metus non nulla cursus, sit amet rutrum est pretium.</span>

				</div>

			</div>
			<ul class="someWork-tvImg clearfix wow fadeInUp animated" data-wow-duration="1s" data-wow-delay="0.5s">
				<li class="tv-item item-left">
					<div class="tv-box">
						<div class="tv">
							<img src="img/common-TV-img.png" />
							<div class="tv-bgColor">
								<a href="#" class="box-a">
									<img src="img/TV-bg1.jpg" />

									<div class="icon">
										<i class="fa fa-address-card"></i>
									</div>
									<div class="bgcolor"></div>
								</a>
							</div>
						</div>
						<div class="tv-bg-op"></div>
						<span>CIRCLE ICONS</span>
					</div>

				</li>
				<li class="tv-item tv-mg">
					<div class="tv-box">
						<div class="tv">
							<img src="img/common-TV-img.png" />
							<div class="tv-bgColor">
								<a href="#" class="box-a">
									<img src="img/tv-bg-p9.png" />

									<div class="icon">
										<i class="fa fa-address-card"></i>
									</div>
									<div class="bgcolor"></div>
								</a>
							</div>>
						</div>
						<div class="tv-bg-op"></div>
						<span>ARROWS</span>
					</div>
				</li>
				<li class="tv-item">
					<div class="tv-box">
						<div class="tv">
							<img src="img/common-TV-img.png" />
							<div class="tv-bgColor">
								<a href="#" class="box-a">
									<img src="img/tv-bg-p5.jpg" />

									<div class="icon">
										<i class="fa fa-address-card"></i>
									</div>
									<div class="bgcolor"></div>
								</a>
							</div>
						</div>
						<div class="tv-bg-op"></div>
						<span>PORTFOLIO THEME</span>
					</div>
				</li>
			</ul>
			<div class="About-us-needyou">
				<div class="needyou-explain">
					<h3>DO YOU LIKE WHAT YOU SEE?</h3>
					<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent justo ligula, interdum ut lobortis quis, interdum vitae metus. Proin fringilla metus non nulla cursus, sit amet rutrum est pretium.</span>
					<div class="explain-button">
						<a href="#"><input type="button" value="PURCHASE" /></a>
					</div>
				</div>
			</div>
		</section>

		<!--公共footer-->
		<footer class="Del-common-footer">
			<section class="footer-section wow fadeInUp animated " data-wow-duration="0.5s" data-wow-delay="0.2s">
				<div class="section-list clearfix">
					<aside class="item-group item-group-left">
						<div class="group-box">
							<div class="top-logo-img">
								<img src="img/logo2.png" />
							</div>
							<ul class="top-list clearfix">
								<li class="list-item list-rss">
									<a href=""><i class="fa fa-rss"></i></a>
								</li>
								<li class="list-item list-f">
									<a href=""><i class="fa fa-facebook-f"></i></a>
								</li>
								<li class="list-item list-twitter">
									<a href=""><i class="fa fa-twitter"></i></a>
								</li>
							</ul>
						</div>
						<p class="span-article">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum gravida quam quis nunc rutrum placerat. Proin eu mi vitae neque veh interdum id nec turpis nam auctor faucibus sollicitudin.</p>
					</aside>
					<aside class="item-group item-group-center mg-l1">
						<dl>
							<dt>CONTACT INFO</dt>
							<dd>
								<a href="#">222 Ave C South</a>
							</dd>
							<dd>
								<a href="#">Saskatoon, Saskatchewan</a>
							</dd>
							<dd>
								<a href="#">Canada S7K 2N5</a>
							</dd>
							<dd class="Email">
								<a href="#">info@deliver.ca</a>
							</dd>
							<dd class="id-num">
								<a href="#">1.306.222.3456</a>
							</dd>
						</dl>
					</aside>
					<aside class="item-group item-group-center mg-l2">
						<dl class="center-dl-r">
							<dt>QUICK LINKS</dt>
							<dd>
								<a href="#"><i class="fa fa-chevron-right"></i>Portfolio</a>
							</dd>
							<dd>
								<a href="#"><i class="fa fa-chevron-right"></i>About</a>
							</dd>
							<dd>
								<a href="#"><i class="fa fa-chevron-right"></i>Archive</a>
							</dd>
							<dd>
								<a href="#"><i class="fa fa-chevron-right"></i>Blog</a>
							</dd>
							<dd>
								<a href="#"><i class="fa fa-chevron-right"></i>Bropdown</a>
							</dd>
							<dd>
								<a href="#"><i class="fa fa-chevron-right"></i>Contact Us</a>
							</dd>
						</dl>
					</aside>
					<aside class="item-group item-group-right">
						<dl>
							<dt>NEWSLETTER</dt>
							<dd><span>Lorem ipsum dolor sit amet dolor consectetur adipiscing elit. </span></dd>
							<dd><input class="Email" type="text" value="Email" />
								<a href="#"><input class="button" type="button" value="OK" /></a>
							</dd>
						</dl>
					</aside>
				</div>
				<div class="section-bottom clearfix">
					<p class="p-left">COPYRIGHT 2013
						<a href="index-Home.html">DELIVER</a>. ALL RIGHTS RESERVED.</p>
					<p class="p-right">ABOUT / PRIVACY POLICY / CONTACT</p>
				</div>
			</section>
		</footer>
		<!--返回顶部-->
		<div class="fixbox">
			<div class="retop" id="reTop" title="回到顶部">
				<a><i class="fa fa-arrow-circle-up"></i></a>
			</div>
			<div class="rehome" title="回到首页">
				<a href="index-Home.html"><i class="fa fa-bookmark-o"></i></a>
			</div>
		</div>
		<script src="js/core.js"></script>
		<script src="http://cdn.dowebok.com/131/js/wow.min.js"></script>
		<script src="vendor/jquery.animsition.min.js"></script>
		<script>
			$(function() {
				Services.topp();
				common.close();
				home.search();
				common.bar();
				home.init();
				var wow = new WOW({
					boxClass: 'wow',
					animateClass: 'animated',
					offset: 0,
					mobile: true,
					live: true
				});

				if(!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
					new WOW().init();
				}
			});
			$(".animsition").animsition({

				inClass: 'fade-in',
				outClass: 'fade-out',
				inDuration: 2700,
				outDuration: 500,
				linkElement: '.animsition-link',
				// e.g. linkElement   :   'a:not([target="_blank"]):not([href^=#])'
				loading: true,
				loadingParentElement: 'body', //animsition wrapper element
				loadingClass: 'animsition-loading',
				unSupportCss: ['animation-duration',
					'-webkit-animation-duration',
					'-o-animation-duration'
				],
				//"unSupportCss" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
				//The default setting is to disable the "animsition" in a browser that does not support "animation-duration".

				overlay: false,
				overlayClass: 'animsition-overlay-slide',
				overlayParentElement: 'body'
			});
		</script>
	</body>

</html>